<template>
    <page-layout>
        <template v-slot:header>
            <el-button size="small" @click="sampleList">返回</el-button>
        </template>

        <el-form :model="page" 
                size="small"
                ref="ruleForm" 
                label-width="100px" 
                class="demo-ruleForm"
                :inline-message="true">
                <el-row>
                    <el-col :xs="24" :sm="12" :md="8">
                        <el-form-item label="样品名字:" prop="name">
                            <el-input v-model="page.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8">
                        <el-form-item label="品牌:" prop="brand">
                            <el-input v-model="page.brand"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8">
                        <el-form-item label="药品类型:" prop="type">
                                <el-input v-model="page.type"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8">
                        <el-form-item label="计量单位:" prop="unit">
                            <el-input v-model="page.unit"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8">
                        <el-form-item label="品级:" prop="level">
                            <el-input v-model="page.level"/>
                        </el-form-item>
                    </el-col>
                    
                    <el-col :span="24">
                        <el-form-item label="产地:" prop="place">
                            <el-input v-model="page.place"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8">
                        <el-form-item label="上架时间:" prop="sale_stime">
                            <el-input v-model="page.sale_stime"/>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="8">
                        <el-form-item label="下架时间:" prop="sale_etime">
                            <el-input v-model="page.sale_etime"/>
                        </el-form-item>
                    </el-col>

                    <!-- <el-col :span="24">
                        <el-form-item label="详情:" prop="detail">
                            <el-button size="small" icon='el-icon-upload2'/>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="24">
                        <el-form-item label="详情" prop="detail">
                            <div class="Detail" v-if="detailArr.length" >
                                <img  v-for="(_,i) in detailArr" :key="i" class="my-detail" :src="`http://www.shuiyue.info:21000${detailArr[i]}`"/>
                            </div>
                            <div class="Detail" v-else style="color:red" >
                                用户没有上传详情图
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="banner" prop="banner">
                            <div class="Banner" v-if="bannerArr.length" >
                                <img v-for="(_,i) in bannerArr" :key="i" class="my-banner" :src="`http://www.shuiyue.info:21000${bannerArr[i]}`"/>
                            </div>
                            <div class="Banner" v-else style="color:red">
                                用户没有上传轮播图
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input type="textarea" v-model="page.remark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
    </page-layout>
</template>

<script>
    export default {
        data() {
            return {
                page: 
                    {   
                        "list": [],
                        "name": "",
                        "product_id": "",
                        "product_name": "",
                        "sale_stime": "",
                        "sale_etime": "",
                        "type": "",
                        "unit": "",
                        "level": "",
                        "place": "",
                        "brand": "",
                        "detail": [],
                        "banner": [],
                        "remark": ""
                    },
                    detailArr: [],
                    bannerArr:[],
            }
        },
        methods:{
            sampleList() {
                this.$router.push('/product/sample/list')
            }
        },
        mounted() {
            if(localStorage.getItem('sampleFlag') ==='true')
            {
                this.page = this.$store.getters['common/sampleList']
            }
            this.detailArr=this.page.detail.split('--')
            console.log(this.detailArr)
            localStorage.removeItem('sampleFlag')  

            if(localStorage.getItem('sampleFlag') ==='true')
            {
                this.page = this.$store.getters['common/sampleList']
            }
            this.bannerArr=this.page.banner.split('--')
            console.log(this.bannerArr)
            localStorage.removeItem('sampleFlag')  
        }

    }
</script>
<style >
    .Detail{
        /* display: flex; */
        width: 200px;
        height: 100%;
        flex-wrap: wrap;
    }
    .Detail >img{
            width: 100px;
            height: 100px;
        }
    .Banner{
        /* display: flex; */
        width: 200px;
        height: 100%;
        flex-wrap: wrap;
    }
    .Banner >img{
            width: 100px;
            height: 100px;
        }
</style>
